<template>
  <div class="settlement-container">
    <div class="settlement-cell">
      <div class="settlement">
        <span class="title">订单编号:</span>
        <span class="content">{{orderNum || '-'}}</span>
      </div>
      <div class="settlement">
        <span class="title">订单总金额（元）:</span>
        <span class="content">{{(dataList[0] && dataList[0].totalPay) || '-'}}</span>
      </div>
    </div>

    <template v-for="(item,index) in (dataList[0]?[dataList[0]]:[])">
      <div class="settlement-cell" :key="index + 100" v-if="item.status=='0'">
        <div class="settlement">
          <span class="title">代理姓名:</span>
          <span class="content">{{item.name}}</span>
        </div>
        <div class="settlement">
          <span class="title">代理电话:</span>
          <span class="content">{{item.phone}}</span>
        </div>
      </div>
      <div class="settlement-cell" :key="index" v-if="item.status=='0'">
        <div class="settlement">
          <span class="title">一次结算金额（元）:</span>
          <span class="content">{{item.price}}</span>
        </div>
        <div class="settlement">
          <span class="title">一次结算时间:</span>
          <span class="content">{{item.rebateTime}}</span>
        </div>
      </div>
    </template>
    <template v-for="(item,index) in (dataList[1]?[dataList[1]]:[])">
      <div class="settlement-cell" :key="index + 1000" v-if="item.status=='0'">
        <div class="settlement">
          <span class="title">代理姓名:</span>
          <span class="content">{{item.name}}</span>
        </div>
        <div class="settlement">
          <span class="title">代理电话:</span>
          <span class="content">{{item.phone}}</span>
        </div>
      </div>
      <div class="settlement-cell" :key="index + 1000000" v-if="item.status=='0'">
        <div class="settlement">
          <span class="title">二次结算金额（元）:</span>
          <span class="content">{{item.price}}</span>
        </div>
        <div class="settlement">
          <span class="title">二次结算时间:</span>
          <span class="content">{{item.rebateTime}}</span>
        </div>
      </div>
    </template>

    <div class="settlement-footer">
      <el-button plain @click="$emit('submit',false)">取消</el-button>
      <el-button type="primary" @click="$emit('submit',false)">确定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderNum: "",
      dataList: []
    };
  },
  methods: {
    initData(orderNum) {
      this.orderNum = orderNum;
      this.$service.queryStatement(orderNum).then(res => {
        console.log(res);
        this.dataList = res.data;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.settlement-cell {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  .settlement {
    flex: 1;
    display: inline-flex;
    .title {
      margin-right: 20px;
    }
    .content {
      color: #909399;
    }
  }
}

.settlement-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>